<template>
  <h3>{{appObject.wg.name}}</h3>
  <el-card class="box-card" style="margin-bottom: 10px;">
    <template #header>
      <div class="card-header">
        <el-row>
          <el-col :span="18"><span>
          {{appObject.wg.name}}
          </span></el-col>
          <el-col :span="6">
            <el-button icon="Star" :type="appObject.wg.focus ? 'default' : 'warning'" 
              circle style="margin-right: 10px;" @click="focusWG()"/>
          </el-col>
        </el-row>
      </div>
    </template>
    <div class="text item">
      <el-row>
        <el-col :span="18"><span>
          <div style="margin-top: 10px;">名称：{{appObject.wg.name}}</div>
          <div style="margin-top: 10px;">描述：{{appObject.wg.description}}</div>
          <div style="margin-top: 10px;">日程：{{appObject.wg.schedule}}</div>
          <div style="margin-top: 10px;">目录：{{appObject.wg.schedule}}</div>
          <div style="margin-top: 10px;">创建者：{{appObject.wg.creator}}</div>
          <div style="margin-top: 10px;">成员：{{appObject.wg.member}}</div>
        </span></el-col>
        <el-col :span="6">
          <el-button link>申请加入</el-button>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script setup>
  import { reactive } from 'vue'
  
  import { getWGById } from '../http/wgApi.js'
  
  import wgStore from '../store/wg.js'
  import {storeToRefs} from 'pinia'
  
  const wStore = wgStore()
  const { wgId } = storeToRefs(wStore)
      
  const appObject = reactive({
    wg: {}
  })
  
  getWGById(wgId['_object'].wgId).then(res => {
    appObject.wg = res.data.data
  })
  
  const focusWG = (e) => {
    appObject.wg.focus = !appObject.wg.focus
  }
  
  
  
</script>

<style scoped>
</style>